<template>
  <a-row
    type="flex"
    :style="{
      padding: '24px',
    }"
  >
    <a-col :xs="24" :lg="18" class="c-left">
      <a-row type="flex" :style="{ flexWrap: 'nowrap' }">
        <a-col flex="1 1 auto" :style="{ minWidth: '0' }">
          <!-- tabs -->
          <a-tabs
            v-model:activeKey="activeKey"
            type="card"
            tab-position="top"
            @tabScroll="callback"
            @change="tabChange"
          >
            <a-tab-pane
              v-for="item in tabsList"
              :key="item.key"
              :tab="item.tabName"
            ></a-tab-pane>
          </a-tabs>
        </a-col>
        <a-col>
          <!-- 定书图标 -->
          <pushpin-two-tone two-tone-color="#3498db" :style="{ fontSize: '18px',borderRadius: '50%',padding: '5px',background: 'linear-gradient(145deg, #e6e6e6, #ffffff)',boxShadow:  '20px 20px 60px #cdced1,-20px -20px 60px #ffffff;' }"/>
        </a-col>
      </a-row>
      <!-- card-list -->
      <a-list
        :grid="{
          gutter: 16,
          xs: 1,
          sm: 1,
          md: 2,
          lg: 2,
          xl: 3,
          xxl: 3,
          xxxl: 3,
        }"
        :data-source="cardList"
      >
        <!-- list-card-item -->
        <template #renderItem="{ item }">
          <a-list-item>
            <a-card hoverable>
              <!-- 文章的路由 -->
              <router-link :to="{ path: '/detail',query: { pageId: encodeURIComponent(JSON.stringify(item)) } }" class="page_link">
                <a-card-meta>
                  <template #title>
                    <div class="page_title">{{ item.title }}</div>
                  </template>
                  <template #description>
                    <a-typography-paragraph
                      :ellipsis="{ rows: 3 }"
                      :content="item.description"
                      :style="{ color: 'inherit' }"
                    />
                  </template>
                  <template #avatar>
                    <a-avatar
                      :size="100"
                      shape="square"
                      :src="item.imgUrl"
                    />
                    <a-rate
                      :value="5"
                      :style="{
                        fontSize: '12px',
                        width: '100%',
                        textAlign: 'center',
                        display: 'block',
                      }"
                      disabled
                      allowHalf
                    />
                  </template>
                </a-card-meta>
                <div
                  :style="{
                    minHeight: '60px',
                    marginTop: '16px',
                    textAlign: 'right',
                  }"
                >
                  <a-tag
                    v-for="tabItem in item.tabs"
                    :key="tabItem"
                    :color="tabItem.color"
                    >{{ tabItem.name }}</a-tag
                  >
                </div>
              </router-link>
              <!-- actions -->
              <template #actions>
                <a-tooltip placement="top">
                  <template #title>
                    <span>{{ likeColor(item.id) ? "取消收藏" : "收藏" }}</span>
                  </template>
                  <div @click="collectHandle(item.id)">
                    <heart-two-tone
                      v-if="likeColor(item.id)"
                      two-tone-color="red"
                    /><heart-outlined v-else />
                    <span
                      :style="{ color: likeColor(item.id) ? 'red' : 'inherit' }"
                      >{{ item.collection }}</span
                    >
                  </div>
                </a-tooltip>
                <a-tooltip placement="top">
                  <template #title>
                    <span>分享</span>
                  </template>
                  <share-alt-outlined />
                </a-tooltip>
                <a-tooltip placement="top">
                  <template #title>
                    <span>访问</span>
                  </template>
                  <export-outlined />
                </a-tooltip>
              </template>
            </a-card>
          </a-list-item>
        </template>
      </a-list>
      <!-- 分页 -->
      <a-pagination
        :style="{
          textAlign: 'center',
          marginBottom: '15px',
        }"
        hideOnSinglePage
        v-model:current="current"
        :total="500"
        :showSizeChanger="false"
        v-model:pageSize="pageSize"
        :show-total="(total) => `总数 ${total}`"
        size="small"
      />
    </a-col>
    <a-col :xs="24" :lg="6" class="c-right">
      <!-- image -->
      <a-card :style="{ marginBottom: '16px' }">
        <a-image
          :preview="false"
          :src="topImg"
        ></a-image>
      </a-card>
      <!-- 站长 -->
      <a-card title="关于站长" :style="{ marginBottom: '16px' }">
        <a-card-meta>
          <template #avatar>
            <a-avatar
              size="large"
              src="https://janyork-1309416366.file.myqcloud.com/2022/02/21/290827fbaea8f.jpg"
            />
          </template>
          <template #description>
            <div>
              站长小舟，在校生。
              <a
                href="http://wpa.qq.com/msgrd?v=3&uin=1305777633&site=qq&menu=yes"
                target="_blank"
                >点击了解他、交朋友、编程交流答疑。</a
              >
            </div>
          </template>
        </a-card-meta>
      </a-card>
      <!-- 日历 -->
      <a-calendar
        v-model:value="dateVal"
        :fullscreen="false"
      >
      <template #headerRender="{ value: current }">
        <div class="dateStyle">{{current.format('YYYY-MM-DD dddd')}}</div>
      </template>
      </a-calendar>
    </a-col>
  </a-row>
</template>

<script setup>
import { reactive, toRefs, computed } from "vue";
import topImg from '../assets/20220307052009689-2048x597.webp';
import dayjs from 'dayjs';
import {
  HeartTwoTone,
  HeartOutlined,
  ShareAltOutlined,
  ExportOutlined,
  PushpinTwoTone
} from "@ant-design/icons-vue";

let data = reactive({
  activeKey: "1",
  tabsList: [
    { key: "1", tabName: "推荐" },
    { key: "2", tabName: "前端" },
    { key: "3", tabName: "node.js" },
    { key: "4", tabName: "算法" },
    { key: "5", tabName: "数据结构" },
  ],
  cardList: [
    {
      id: "1",
      nickname: 'decade',
      title: "深入理解Vue.js实战实战实战实战实战",
      description:
        "本书全面介绍 Vue.js 框架的出现、设计和使用，结合实战让读者更深入理解 Vue.js 框架，掌握使用方法。",
      collection: "111",
      imgUrl: 'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png',
      tabs: [
        { name: "精选", color: "red" },
        { name: "前端", color: "blue" },
        { name: "javaScript", color: "orange" },
      ],
      createdTime: '2021-01-15'
    },
    {
      id: "2",
      nickname: 'decade',
      title: "深入理解Vue.js实战",
      description:
        "本书全面介绍 Vue.js 框架的出现、设计和使用，结合实战让读者更深入理解 Vue.js 框架，掌握使用方法。",
      collection: "1000",
      imgUrl: 'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png',
      tabs: [
        { name: "精选", color: "red" },
        { name: "vue", color: "green" },
        { name: "javaScript", color: "orange" },
      ],
      createdTime: '2021-01-15'
    },
    {
      id: "3",
      nickname: 'decade',
      title: "深入理解Vue.js实战",
      description:
        "本书全面介绍 Vue.js 框架的出现、设计和使用，结合实战让读者更深入理解 Vue.js 框架，掌握使用方法。",
      collection: "1120",
      imgUrl: 'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png',
      tabs: [
        { name: "精选", color: "red" },
        { name: "vue", color: "green" },
        { name: "es6", color: "pink" },
      ],
      createdTime: '2021-01-15'
    },
    {
      id: "4",
      nickname: 'decade',
      title: "深入理解Vue.js实战",
      description:
        "本书全面介绍 Vue.js 框架的出现、设计和使用，结合实战让读者更深入理解 Vue.js 框架，掌握使用方法。",
      collection: "11111",
      imgUrl: 'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png',
      tabs: [
        { name: "精选", color: "red" },
        { name: "vue", color: "green" },
        { name: "教程", color: "purple" },
      ],
      createdTime: '2021-01-15'
    },
    {
      id: "5",
      nickname: 'decade',
      title: "深入理解Vue.js实战",
      description:
        "本书全面介绍 Vue.js 框架的出现、设计和使用，结合实战让读者更深入理解 Vue.js 框架，掌握使用方法。",
      collection: "11111",
      imgUrl: 'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png',
      tabs: [
        { name: "精选", color: "red" },
        { name: "vue", color: "green" },
        { name: "教程", color: "purple" },
      ],
      createdTime: '2021-01-15'
    },
    {
      id: "6",
      nickname: 'decade',
      title: "深入理解Vue.js实战",
      description:
        "本书全面介绍 Vue.js 框架的出现、设计和使用，结合实战让读者更深入理解 Vue.js 框架，掌握使用方法。",
      collection: "11111",
      imgUrl: 'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png',
      tabs: [
        { name: "精选", color: "red" },
        { name: "vue", color: "green" },
        { name: "教程", color: "purple" },
      ],
      createdTime: '2021-01-15'
    },
  ],
  likeResourceIds: ["1", "3"],
  current: 1,
  pageSize: 12,
  dateVal: dayjs(),
});

let {
  activeKey,
  tabsList,
  cardList,
  likeResourceIds,
  current,
  pageSize,
  dateVal,
} = toRefs(data);


// 全局加载
// let updateLoading = inject('loading')

const likeColor = computed(() => {
  return (id) => {
    let index = likeResourceIds.value.indexOf(id);
    if (index !== -1) {
      return true;
    }
    return false;
  };
});

function callback(val) {
  console.log(val);
}

function tabChange(val) {
  console.log(val);
}

function collectHandle(id) {
  let isLike = likeColor.value(id);
  // true 为已经收藏
  // false 为没有收藏
  if (isLike) {
    let index = likeResourceIds.value.indexOf(id);
    likeResourceIds.value.splice(index, 1);
  } else {
    likeResourceIds.value.push(id);
  }
}

function screenHandle() {}
</script>

<style scoped>
.c-left,
.c-right {
  padding: 0 12px;
}
.dateStyle{
  padding: 10px 15px;
  font-size: 16px;
  font-weight: bold;
  text-align: end;
}
.page_link:hover .page_title {
  color: #1890ff;
}
.page_title {
  font-size: 17px;
  white-space:nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.6s;
}
@media screen and (max-width: 992px) {
  .c-left,
  .c-right {
    padding: 0;
  }
}
</style>